<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件管理</title>
    <style>
        .file-list { list-style: none; padding: 0; }
        .file-item {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        .delete-btn { color: #f44336; cursor: pointer; }
    </style>
</head>
<body>
<h2>文件浏览</h2>
<ul class="file-list" id="fileList">
    <!-- 模拟从后端获取的文件列表，实际用 th:each 遍历 -->
    <li class="file-item" data-file-id="file001">
        <span>文档1.pdf</span>
        <span class="delete-btn" onclick="deleteFile('file001')">删除</span>
    </li>
    <li class="file-item" data-file-id="file002">
        <span>表格2.xlsx</span>
        <span class="delete-btn" onclick="deleteFile('file002')">删除</span>
    </li>
</ul>

<h2>回收站</h2>
<ul class="file-list" id="recycleBin">
    <!-- 回收站内容通过 JS/后端渲染，初始为空 -->
</ul>

<script>
    // 删除文件函数：调用后端接口
    function deleteFile(fileId) {
        if (confirm('确定删除该文件？删除后可在回收站找回')) {
            // 发 DELETE 请求（与 Controller 映射一致）
            fetch(`/file/delete/${fileId}`, { method: 'DELETE' })
                .then(response => response.text())
                .then(result => {
                    alert(result); // 提示后端返回结果
                    // 前端更新：从浏览区移除，加入回收站
                    const item = document.querySelector(`.file-item[data-file-id="${fileId}"]`);
                    if (item) {
                        item.remove(); // 浏览区移除
                        document.getElementById('recycleBin').appendChild(item); // 加入回收站
                    }
                })
                .catch(error => {
                    console.error('删除请求失败：', error);
                    alert('删除失败，请重试');
                });
        }
    }
</script>
</body>
</html>